<template>
  <div>
    <el-divider>float塌陷</el-divider>
    <div class="collapse">
      <div class="outer"></div>
      <div class="inner"></div>
    </div>
    <el-divider>脱离文档流</el-divider>
    <div class="dom">
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
    <el-divider>开启BFC</el-divider>
    <div class="start-bfc">
      <ul>
        <li>float</li>
        <li>inline-block</li>
        <li>overFlow</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "BfcFloat",
};
</script>

<style lang="less" scoped>
.collapse {
  height: 50px;
  border: solid 1px skyblue;
  .outer {
    border: solid gray 1px;
  }
  .inner {
    height: 20px;
    width: 20px;
    background-color: green;
    float: left;
  }
}
.dom {
  .top {
    width: 20px;
    height: 20px;
    background-color: grey;
    float: left;
  }
  .bottom {
    width: 40px;
    height: 40px;
    background-color: springgreen;
  }
}
.start-bfc {
  & > ul li {
    list-style: none;
  }
}
</style>